<template>
    <div class="shopcar">
        <!-- 商品列表 -->
        <div class="good_list">

            <div class="mui-card" v-for="(item,i) in goodsList" :key='i'>
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">

                        <mt-switch 
                            v-model='$store.getters.getGoodsSelect[item.id]' 
                            @change='selectChanged(item.id,$store.getters.getGoodsSelect[item.id])
                        '>
                        </mt-switch>

                        <img :src="item.thumb_path">

                        <div >
                            <p class='shopcar_title'>{{item.title}}</p>
                            <p class='abc'>
                                <span class='jiage'>￥{{item.sell_price}}</span>
                                <numbox class='numbox' :initcount='$store.getters.getGoodsCount[item.id]' :goodsid='item.id'></numbox>
                                <a href='javascript:;' @click.prevent='remove(item.id,i)' >删除</a>
                            </p>
                        </div>

                    </div>
                </div>
            </div>

        </div>
        <!-- 结算 -->
        <div class="mui-card zongji">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <div class="left">
                        <p>总计（不含运费）</p>
                        <p>已勾选商品 <b>{{$store.getters.getGoodsTotal.count}}</b> 件，总价：<b>￥{{$store.getters.getGoodsTotal.Total}}</b></p>
                    </div>
                    <div class="right">
                        <button type="button" class="mui-btn mui-btn-success">去结算</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import numbox from "../subcomponent/shopcar_numbox.vue";
export default {
    data(){
        return {
            goodsList:[]
        }
    },
    created(){
        this.getGoodsList();
    }
    ,
    methods:{
        getGoodsList(){

            var idArr = [];
            this.$store.state.car.forEach(item => {
                idArr.push(item.id)
            });

            if(idArr.length==0){
                return
            }

            this.$http.get('api/goods/getshopcarlist/'+idArr.join(',')).then(res=>{
                // console.log(res)     
                if(res.body.status==0){
                    this.goodsList = res.body.message
                    console.log(this.goodsList)
                }
            })
        },
        remove(id,index){
            this.goodsList.splice(index,1)
            this.$store.commit('removeFormCar',id)
        },
        selectChanged(id,val){
            this.$store.commit('updateGoodsSelect',{id,selected:val})
        }
    },
    components: {
        numbox
    },

};
</script>

<style lang="scss" scoped>
.shopcar {
    background-color: #ccc;
    overflow: hidden;
    .good_list{

        .mui-card-content-inner{
            display: flex;
            .abc{
                display: flex;
            }
            
        }
        img{
            width: 40px;
            height: 40px;
            margin: 0 10px;
        }
        .numbox{
            margin: 0 10px;
        }
        .shopcar_title{
            height: 42px;
            font-size: 12px;
            color: #000;
            font-weight: 800;
            margin-left: 10px;
        }
        .jiage{
            color: red
        }
        .mui-switch{
            margin-top: 18px;
        }
    }
}

.abc{
    margin-left: -50px;
    span{
        margin-right: 15px;
    }
    a{
        margin-left: 15px;
    }
}

.zongji{
    .left{
        float: left;
        b{
            color: red
        }
    }
    .right{
        float: right;
        margin-top: 10px;
    }
}


</style>

<style >
    .mui-btn-primary:active {
    color: #000;
    border: 1px solid #000;
    background-color: #000!important; 
    }
</style>